<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { watch } from 'vue'
import DictItemFormPanel from './DictItemFormPanel.vue'
import { DictApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'DictTable' })

const props = withDefaults(defineProps<Props>(), {
  id: '',
  type: undefined,
})

interface Props {
  id: string
  type: DictApi.DictType
}

const userStore = useUserStore()
const queryForm = reactive<DictApi.DictItemQuery>({
  dictId: '',
})

const {
  tableData: dataList,
  loading,
  search,
  handleDelete,
} = useTable(() => DictApi.listDictItem({ ...queryForm }), { immediate: false })

const columns: TableInstanceColumns[] = [
  { title: '标签', dataIndex: 'label', slotName: 'label' },
  { title: '编码', dataIndex: 'value', slotName: 'value' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  { title: '描述', dataIndex: 'description', slotName: 'description', render: ({ record }) => record.description || '--' },
  {
    title: '操作',
    slotName: 'action',
    width: 80,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:dict:write']),
  },
]

// 删除
const onDelete = (item: DictApi.DictItemResp) => {
  return handleDelete(() => DictApi.removeDictItem(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

// 新增
const DictItemFormPanelRef = ref<InstanceType<typeof DictItemFormPanel>>()
const onCreate = () => {
  if (queryForm.dictId !== '' && queryForm.dictId !== undefined) {
    DictItemFormPanelRef.value?.create(queryForm.dictId)
  } else {
    Message.error('请选择一个字典')
  }
}

// 详情
const onRowClick = (row) => {
  if (props.type === 'custom') {
    DictItemFormPanelRef.value?.open(row.id)
  }
}

// 排序
const onChange = async (newData) => {
  try {
    const data = {
      dictId: queryForm.dictId,
      dictItemIds: newData.map(item => item.id),
    }
    loading.value = true
    await DictApi.sortDictItem(data)
    search()
  } finally {
    loading.value = false
  }
}

watch(() => props.id, () => {
  if (props.id) {
    queryForm.dictId = props.id
    search()
  }
}, { immediate: true })
</script>

<template>
  <ProTable
    :data="dataList"
    :columns="columns"
    :loading="loading"
    :pagination="false"
    :draggable="type === 'custom' ? { type: 'handle', width: 40 } : null"
    :scroll="{ x: '100%', y: '100%', minWidth: 560 }"
    @row-click="onRowClick"
    @refresh="search"
    @change="onChange"
  >
    <template #toolbar-right>
      <a-button v-if="type === 'custom'" v-permission="['system:dict:manage']" type="primary" @click="onCreate">
        <template #icon>
          <icon-plus />
        </template>
        <span>添加字典项</span>
      </a-button>
    </template>
    <template #label="{ record }">
      <a-tag v-if="record.color" :color="record.color">
        {{ record.label }}
      </a-tag>
      <span v-else>{{ record.label }}</span>
    </template>
    <template #status="{ record }">
      <CellStatus :status="record.status" />
    </template>
    <template #action="{ record }">
      <a-space>
        <a-link v-permission="['system:dict:manage']" :disabled="type !== 'custom'" status="danger" @click.stop="onDelete(record)">
          删除
        </a-link>
      </a-space>
    </template>
  </ProTable>
  <DictItemFormPanel ref="DictItemFormPanelRef" @change="search" />
</template>

<style lang="less" scoped></style>
